绝对定位(absolute-重要)：元素以带有定位的父级元素来移动位置。
父亲没有定位，以浏览器移动位置为准，  父亲有定位（任何定位都行），则以父亲的位置为准。
并且是继承性质的，父亲如果没有定位， 那么可以以爷爷的定位 位置来做参考。

另外绝对定位不保留原来的位置，你只要设置为绝对定位， 你的位置就会被别的元素占有。


口诀： 一般来讲，子绝父相。就是子级用绝对定位（不占用位置随意移动）， 父级用相对定位（有自己的位置）。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style>
		.father {
			width: 350px;
			height: 350px;
			background-color: orange;
			/* 父元素给个距离 */
			margin: 100px;

			/*position: absolute;*/

		}

		.son {
			width: 200px;
			height: 200px;
			background-color: green;

			position: absolute;
			top: 50px;
			left: 50px;
		}

		.fuqin {
			/*position: relative;*/
			width: 500px;
			height: 500px;
			background-color: pink;
		}
		.damao {
			position: absolute;
			top: 0;
			left: 0;


			width: 200px;
			height: 200px;
			background-color: orange;
		}

		.ermao {
			width: 250px;
			height: 250px;
			background-color: red;
		}
	</style>
</head> 
<body>
	<div class="father">
		<div class="son"></div>
	</div>

	<div class="fuqin">
		我是父亲
		<div class="damao">我是大猫</div>
		<div class="ermao">我是二猫</div>
	</div>
</body>
</html>
